<template>
  <div class="app-container" v-loading="loading">
    <div class="table-title-wrap justify-end" v-if="$route.query.beFrom == 'SuborderView'">
      <el-button type="primary" plain size="mini" @click="back"> 返回 </el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="车辆详情" name="vehicleDetails">
        <div class="vehicleDetails">
          <el-form :model="form" label-width="160px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="订单编号:">
                  <span style="color: #1890ff; cursor: pointer" @click="orderDetail(form)">
                    {{ form.orderCode }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="额度申请编号:">
                  <span @click="goToEdDetail(form.calcSchemeId)" style="color: #1890ff; cursor: pointer">
                    {{ form.calcSchemeCode }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="车牌号:">
                  <span>{{ form.carPlateNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车辆种类:">
                  <span>{{ form.carTypeStr }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车辆类型:">
                  <span>{{ form.carPowerTypeStr }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="品牌:">
                  <span>{{ form.carBrandName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车系:">
                  <span>{{ form.carSeriesName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车型:">
                  <span>{{ form.carModelName }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="厂商:">
                  <span>{{ form.carManufacturer }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="座位:">
                  <span>{{ form.carSeating }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="排量:">
                  <span>{{ form.carCc }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="车辆使用性质:">
                  <span>{{ form.operationTypeStr }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="整备质量（吨）:">
                  <span>{{ form.curbWeight }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="核定载客人数:">
                  <span>{{ form.passengerCapacity }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="合同保证金:">
                  <span> {{ form.planContractCashdeposit }}{{ (form.planContractCashdeposit ^ 0) > 0 ? ([5, 8, 3, 4].includes(form.orderStatus ^ 0) ? '(已收款)' : '(未收款)') : '' }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="违章保证金:">
                  <span> {{ form.planViolationCashdeposit }}{{ (form.planViolationCashdeposit ^ 0) > 0 ? ([5, 8, 3, 4].includes(form.orderStatus ^ 0) ? '(已收款)' : '(未收款)') : '' }} </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="right"></el-divider>
            <el-row>
              <el-col :span="8">
                <el-form-item label="原新车采购价:">
                  <span>
                    {{ format_thousand(form.carPurchasePriceQuondam) }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="首次登记日期:">
                  <span>
                    {{ form.carFirstRegistrationDate }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公里:">
                  <span>{{ form.carMileage }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="3年内出险次数:">
                  <span>{{ form.carLossFrequence }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="GPS套数:">
                  <span>{{ form.quantityGps }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="GPS费用:">
                  <span>
                    {{ format_thousand(form.gpsAmount) }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="当期评估价:">
                  <span>
                    {{ format_thousand(form.carCurrentAppraisal) }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="过户费:">
                  <span>
                    {{ format_thousand(form.transferFee) }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="right"></el-divider>

            <el-row>
              <el-col :span="8">
                <el-form-item label="上牌城市/产权城市:">
                  <span>{{ form.carPropertyCity }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开发城市:">
                  <span>{{ form.carAffiliationVal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="运营城市:">
                  <span>{{ form.carOperateCityVal }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="right"></el-divider>

            <el-row>
              <el-col :span="8">
                <el-form-item label="车辆原币原值:">
                  <span>
                    {{ format_thousand(form.originalCurrencyOriginalValue) }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="月折旧费(如果按租期):">
                  <span>
                    {{ format_thousand(form.monthlyDepreciationCharges) }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已折旧月数:">
                  <span>{{ form.depreciatedMonths }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="累计折旧:">
                  <span>
                    {{ format_thousand(form.accumulatedDepreciation) }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车辆净值:">
                  <span>
                    {{ format_thousand(form.netVehicleValue) }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="司机姓名:">
                  <span>{{ form.driverName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="司机手机号:">
                  <span>{{ form.driverMobile }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="租金支付明细" name="repaymentDetails">
        <div class="card-wrap card-padding">
          <div class="grid-container">
            <div class="grid-item" style="background-color: #f8f8f9; font-weight: 600; color: #515a6e">车型</div>
            <div class="grid-item" style="background-color: #f8f8f9; font-weight: 600; color: #515a6e">指导价</div>
            <div class="grid-item" style="background-color: #f8f8f9; font-weight: 600; color: #515a6e">租赁期（月）</div>
            <div class="grid-item is">{{ form.carModelName }}</div>
            <div class="grid-item is">
              {{ format_thousand(form.carGuidePrice) }}
            </div>
            <div class="grid-item is">
              {{ form.planTenancyTypeStr }}
            </div>
            <div class="grid-item" style="background-color: #f8f8f9; font-weight: 600; color: #515a6e">起租日期</div>
            <div class="grid-item" style="background-color: #f8f8f9; font-weight: 600; color: #515a6e">首期租金</div>
            <div class="grid-item" style="background-color: #f8f8f9; font-weight: 600; color: #515a6e">每期租金（含税）</div>
            <div class="grid-item is">
              {{ form.estimatedDeliveryTime }}
            </div>
            <div class="grid-item is">
              {{ format_thousand(form.monthsPrice) }}
            </div>
            <div class="grid-item is">
              {{ format_thousand(form.planRent) }}
            </div>
          </div>
        </div>

        <div class="card-wrap card-padding">
          <table-page :dataList="dataListBottom" border :total="total">
            <!-- 普通列插槽 -->
            <template slot="tableCol">
              <el-table-column label="期数" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.periodsNum && scope.row.periodsNum !== 99"> 第{{ scope.row.periodsNum }}期 </span>
                  <span v-else-if="(scope.row.periodsNum && scope.row.periodsNum == 99) || scope.row.proceedsType == 2"> 首期租金 </span>
                  <span v-else>
                    {{ scope.row.proceedsTypeStr }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="支付日期" align="center" prop="paymentTime" />
              <el-table-column label="每期租金（含税）" align="center">
                <template slot-scope="scope">
                  {{ format_thousand(scope.row.receivableAmount) }}
                </template>
              </el-table-column>
              <el-table-column label="逾期天数" align="center" prop="overdueDay" />
              <el-table-column label="应支付日期" align="center" prop="repaymentTime" />
              <el-table-column label="逾期期限" align="center" prop="repaymentTime" />
              <el-table-column label="账单开始时间" align="center" prop="accountantBillDate" />
              <el-table-column label="应支付总金额(元)" align="center" prop="receivableAmount">
                <template slot-scope="scope">
                  {{ format_thousand(scope.row.receivableAmount) }}
                </template>
              </el-table-column>
              <el-table-column label="已支付总金额(元)" align="center" prop="receivedAmount">
                <template slot-scope="scope">
                  {{ format_thousand(scope.row.receivedAmount) }}
                </template>
              </el-table-column>
              <el-table-column label="租金支付状态" align="center">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.finance_proceeds_check_type" :value="scope.row.checkState" />
                </template>
              </el-table-column>
            </template>
          </table-page>
        </div>
      </el-tab-pane>
      <el-tab-pane label="合同变更" name="contractChange">
        <OnListHistory></OnListHistory>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getOrderCarDetail, List, getFirstRent } from '@/api/vehicleOrder'
import OnListHistory from '@/views/order/minOrder/onListHistory/index.vue'
// import { List } from "@/api/finance/manage/payment/api.js";
export default {
  name: 'SuborderDetail',
  dicts: ['finance_proceeds_check_type'],
  components: { OnListHistory },
  data() {
    return {
      dataListBottom: [],
      activeName: 'vehicleDetails',
      form: {},
      total: 0,
      loading: false,
    }
  },
  created() {
    this.getOrderCarDetail()
  },
  methods: {
    goToEdDetail(calcSchemeId) {
      this._toPage({
        path: '/quota/ApplyDetails',
        query: {
          calcSchemeId,
        },
      })
    },
    // 订单详情
    orderDetail(row) {
      this._toPage({
        name: 'OrderDetails',
        query: {
          type: row.carType,
          orderId: row.orderId,
          calcSchemeId: row.calcSchemeId,
        },
      })
    },
    back() {
      this.$tab.closeOpenPage(this.$route)
      this.$router.push({
        name: this.$route.query.beFrom,
        query: {
          orderId: this.$route.query.orderId,
        },
      })
    },
    async getOrderCarDetail() {
      this.loading = true
      try {
        let res = await getOrderCarDetail(this.$route.query.id)
        this.loading = false
        this.form = res.data
        this.getFirstRent()
      } catch (error) {}
    },
    async getFirstRent() {
      try {
        let res = await getFirstRent(this.$route.query.id)
        this.form.monthsPrice = res.data.firstRent
        this.form.finalPayment = res.data.balancepayment
        this.form.planPaymentMethodType = res.data.planPaymentMethodType
        this.form.frequency = res.data.frequency
        this.getList()
      } catch (error) {}
    },
    async getList() {
      try {
        let res = await List({
          orderCode: this.$route.query.id,
          firstRent: this.form.monthsPrice,
          monthlyRent: this.form.planRent,
          leaseDuration: this.form.planTenancyTypeStr,
          startTime: this.form.estimatedDeliveryTime,
          finalPayment: this.form.finalPayment,
          planPaymentMethodType: this.form.planPaymentMethodType,
          frequency: this.form.frequency,
        })
        this.dataListBottom = res
      } catch (error) {}
    },
    handleClick() {},
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  background-color: #fff;
}
.vehicleDetails {
  width: 80%;
  margin: 0 auto;
}
.grid-container {
  width: 50%;
  display: grid;
  grid-template-columns: auto auto auto; /* 3 columns, each equally sized */
  grid-template-rows: 50px 70px 50px 70px; /* specific heights for rows */
}

.grid-item {
  text-align: center;
  padding: 20px;
  font-size: 13px;
  border: 1px solid #dfe6ec;
  margin: 0 -1px -1px 0;
}
.is {
  line-height: 40px;
  color: #606266;
}
</style>
